{% extends "base.html" %}
{% block title %}修改密码 - {{ current_user.real_name }} - 乒乓球培训管理系统{% endblock %}
{% block page_title %}修改密码{% endblock %}

{% block extra_css %}
<style>
.password-container {
    background: white;
    border-radius: 20px;
    box-shadow: 0 15px 35px rgba(0,0,0,0.1);
    padding: 0;
    overflow: hidden;
    margin: 2rem auto;
    max-width: 600px;
}

.password-header {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    color: white;
    padding: 2rem;
    text-align: center;
    position: relative;
}

.password-header::before {
    content: '';
    position: absolute;
    top: -50%;
    right: -50%;
    width: 100%;
    height: 200%;
    background: rgba(255,255,255,0.1);
    transform: rotate(45deg);
    pointer-events: none;
}

.password-header h3 {
    position: relative;
    z-index: 1;
}

.password-content {
    padding: 2rem;
}

.form-floating {
    margin-bottom: 1.5rem;
    position: relative;
}

.form-floating .form-control {
    border: 2px solid #e9ecef;
    border-radius: 12px;
    padding: 1rem 3rem 1rem 1rem;
    font-size: 1rem;
    transition: all 0.3s ease;
    background: #f8f9fa;
}

.form-floating .form-control:focus {
    border-color: #667eea;
    box-shadow: 0 0 0 0.2rem rgba(102, 126, 234, 0.25);
    background: white;
}

.password-toggle {
    position: absolute;
    right: 1rem;
    top: 50%;
    transform: translateY(-50%);
    background: none;
    border: none;
    color: #6c757d;
    cursor: pointer;
    z-index: 10;
    padding: 0.5rem;
    border-radius: 50%;
    transition: all 0.2s ease;
}

.password-toggle:hover {
    background: #f8f9fa;
    color: #495057;
}

.password-strength {
    margin-top: 0.5rem;
    padding: 0.5rem;
    border-radius: 8px;
    background: #f8f9fa;
    display: none;
}

.strength-bar {
    height: 6px;
    border-radius: 3px;
    background: #e9ecef;
    overflow: hidden;
    margin-bottom: 0.5rem;
}

.strength-fill {
    height: 100%;
    border-radius: 3px;
    transition: all 0.3s ease;
    width: 0%;
}

.strength-weak .strength-fill {
    background: #dc3545;
    width: 25%;
}

.strength-fair .strength-fill {
    background: #ffc107;
    width: 50%;
}

.strength-good .strength-fill {
    background: #28a745;
    width: 75%;
}

.strength-strong .strength-fill {
    background: #007bff;
    width: 100%;
}

.strength-text {
    font-size: 0.875rem;
    font-weight: 500;
}

.password-requirements {
    background: #f8f9fa;
    border-radius: 10px;
    padding: 1rem;
    margin-bottom: 1.5rem;
}

.requirement-item {
    display: flex;
    align-items: center;
    margin-bottom: 0.5rem;
    font-size: 0.875rem;
    transition: color 0.3s ease;
}

.requirement-item:last-child {
    margin-bottom: 0;
}

.requirement-icon {
    width: 16px;
    height: 16px;
    margin-right: 0.5rem;
    border-radius: 50%;
    background: #dc3545;
    color: white;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.75rem;
    transition: background-color 0.3s ease;
}

.requirement-item.met {
    color: #28a745;
}

.requirement-item.met .requirement-icon {
    background: #28a745;
}

.btn-change-password {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    border: none;
    color: white;
    padding: 0.875rem 2rem;
    border-radius: 12px;
    font-weight: 500;
    font-size: 1rem;
    transition: all 0.3s ease;
    width: 100%;
    position: relative;
    overflow: hidden;
}

.btn-change-password:hover {
    transform: translateY(-2px);
    box-shadow: 0 10px 25px rgba(102, 126, 234, 0.4);
    color: white;
}

.btn-change-password:disabled {
    opacity: 0.6;
    transform: none;
    box-shadow: none;
}

.security-tips {
    background: linear-gradient(135deg, #17a2b8 0%, #20c997 100%);
    color: white;
    padding: 1.5rem;
    border-radius: 12px;
    margin-top: 2rem;
}

.security-tip-item {
    display: flex;
    align-items: flex-start;
    margin-bottom: 0.75rem;
}

.security-tip-item:last-child {
    margin-bottom: 0;
}

.security-tip-icon {
    width: 20px;
    height: 20px;
    margin-right: 0.75rem;
    margin-top: 0.125rem;
    flex-shrink: 0;
}

.password-match-indicator {
    position: absolute;
    right: 1rem;
    top: 50%;
    transform: translateY(-50%);
    width: 20px;
    height: 20px;
    border-radius: 50%;
    display: none;
    align-items: center;
    justify-content: center;
    font-size: 0.75rem;
}

.password-match {
    background: #28a745;
    color: white;
    display: flex;
}

.password-mismatch {
    background: #dc3545;
    color: white;
    display: flex;
}

@media (max-width: 768px) {
    .password-container {
        margin: 1rem;
        border-radius: 15px;
    }

    .password-header {
        padding: 1.5rem;
    }

    .password-content {
        padding: 1.5rem;
    }
}
</style>
{% endblock %}

{% block content %}
<div class="container-fluid">
    <!-- 返回按钮 -->
    <div class="mb-3">
        <a href="{{ url_for('profile.view') }}" class="btn btn-outline-secondary">
            <i class="bi bi-arrow-left"></i> 返回个人资料
        </a>
    </div>

    <div class="password-container">
        <div class="password-header">
            <div class="d-flex align-items-center justify-content-center mb-3">
                <i class="bi bi-key fs-1 me-3"></i>
                <div>
                    <h3 class="mb-1">修改密码</h3>
                    <p class="mb-0 opacity-75">为了您的账户安全，请定期更换密码</p>
                </div>
            </div>
        </div>

        <div class="password-content">
            <form method="POST" id="passwordForm">
                {{ form.hidden_tag() }}

                <!-- 当前密码 -->
                <div class="form-floating">
                    {{ form.current_password(class="form-control", id="currentPassword") }}
                    {{ form.current_password.label(class="form-label") }}
                    <button type="button" class="password-toggle" data-target="currentPassword">
                        <i class="bi bi-eye"></i>
                    </button>
                    {% if form.current_password.errors %}
                    <div class="invalid-feedback d-block">
                        {% for error in form.current_password.errors %}
                            <small>{{ error }}</small>
                        {% endfor %}
                    </div>
                    {% endif %}
                </div>

                <!-- 新密码 -->
                <div class="form-floating">
                    {{ form.new_password(class="form-control", id="newPassword") }}
                    {{ form.new_password.label(class="form-label") }}
                    <button type="button" class="password-toggle" data-target="newPassword">
                        <i class="bi bi-eye"></i>
                    </button>
                    {% if form.new_password.errors %}
                    <div class="invalid-feedback d-block">
                        {% for error in form.new_password.errors %}
                            <small>{{ error }}</small>
                        {% endfor %}
                    </div>
                    {% endif %}

                    <!-- 密码强度指示器 -->
                    <div class="password-strength" id="passwordStrength">
                        <div class="strength-bar">
                            <div class="strength-fill"></div>
                        </div>
                        <div class="strength-text">密码强度：<span id="strengthText">无</span></div>
                    </div>
                </div>

                <!-- 确认新密码 -->
                <div class="form-floating">
                    {{ form.confirm_password(class="form-control", id="confirmPassword") }}
                    {{ form.confirm_password.label(class="form-label") }}
                    <button type="button" class="password-toggle" data-target="confirmPassword">
                        <i class="bi bi-eye"></i>
                    </button>
                    <div class="password-match-indicator" id="matchIndicator">
                        <i class="bi bi-check"></i>
                    </div>
                    {% if form.confirm_password.errors %}
                    <div class="invalid-feedback d-block">
                        {% for error in form.confirm_password.errors %}
                            <small>{{ error }}</small>
                        {% endfor %}
                    </div>
                    {% endif %}
                </div>

                <!-- 密码要求 -->
                <div class="password-requirements">
                    <h6 class="mb-3">
                        <i class="bi bi-shield-check me-2"></i>密码要求
                    </h6>
                    <div class="requirement-item" id="req-length">
                        <div class="requirement-icon">
                            <i class="bi bi-x"></i>
                        </div>
                        至少8个字符
                    </div>
                    <div class="requirement-item" id="req-lowercase">
                        <div class="requirement-icon">
                            <i class="bi bi-x"></i>
                        </div>
                        包含小写字母
                    </div>
                    <div class="requirement-item" id="req-uppercase">
                        <div class="requirement-icon">
                            <i class="bi bi-x"></i>
                        </div>
                        包含大写字母
                    </div>
                    <div class="requirement-item" id="req-number">
                        <div class="requirement-icon">
                            <i class="bi bi-x"></i>
                        </div>
                        包含数字
                    </div>
                    <div class="requirement-item" id="req-different">
                        <div class="requirement-icon">
                            <i class="bi bi-x"></i>
                        </div>
                        与当前密码不同
                    </div>
                </div>

                <!-- 提交按钮 -->
                <button type="submit" class="btn-change-password" id="submitBtn" disabled>
                    <i class="bi bi-key me-2"></i>
                    更新密码
                </button>
            </form>

            <!-- 安全提示 -->
            <div class="security-tips">
                <h6 class="mb-3">
                    <i class="bi bi-lightbulb me-2"></i>密码安全建议
                </h6>
                <div class="security-tip-item">
                    <i class="bi bi-check-circle security-tip-icon"></i>
                    <div>使用独特的密码，避免在多个网站使用相同密码</div>
                </div>
                <div class="security-tip-item">
                    <i class="bi bi-check-circle security-tip-icon"></i>
                    <div>定期更换密码，建议每3-6个月更换一次</div>
                </div>
                <div class="security-tip-item">
                    <i class="bi bi-check-circle security-tip-icon"></i>
                    <div>不要在公共场所或他人面前输入密码</div>
                </div>
                <div class="security-tip-item">
                    <i class="bi bi-check-circle security-tip-icon"></i>
                    <div>如发现账户异常，请立即修改密码并联系管理员</div>
                </div>
            </div>
        </div>
    </div>
</div>
{% endblock %}

{% block extra_js %}
<script>
// 密码显示/隐藏切换
document.querySelectorAll('.password-toggle').forEach(toggle => {
    toggle.addEventListener('click', function() {
        const targetId = this.getAttribute('data-target');
        const input = document.getElementById(targetId);
        const icon = this.querySelector('i');

        if (input.type === 'password') {
            input.type = 'text';
            icon.className = 'bi bi-eye-slash';
        } else {
            input.type = 'password';
            icon.className = 'bi bi-eye';
        }
    });
});

// 密码强度检测
function checkPasswordStrength(password) {
    let score = 0;
    let strength = 'weak';

    // 长度检查
    if (password.length >= 8) score += 25;
    if (password.length >= 12) score += 25;

    // 字符类型检查
    if (/[a-z]/.test(password)) score += 15;
    if (/[A-Z]/.test(password)) score += 15;
    if (/[0-9]/.test(password)) score += 10;
    if (/[^A-Za-z0-9]/.test(password)) score += 10;

    // 确定强度等级
    if (score >= 80) strength = 'strong';
    else if (score >= 60) strength = 'good';
    else if (score >= 40) strength = 'fair';
    else strength = 'weak';

    return { score, strength };
}

// 更新密码强度显示
function updatePasswordStrength(password) {
    const strengthIndicator = document.getElementById('passwordStrength');
    const strengthText = document.getElementById('strengthText');
    const strengthBar = strengthIndicator.querySelector('.strength-bar');

    if (password.length === 0) {
        strengthIndicator.style.display = 'none';
        return;
    }

    strengthIndicator.style.display = 'block';
    const result = checkPasswordStrength(password);

    // 移除所有强度类
    strengthBar.className = 'strength-bar strength-' + result.strength;

    // 更新文本
    const strengthTexts = {
        weak: '弱',
        fair: '一般',
        good: '良好',
        strong: '强'
    };
    strengthText.textContent = strengthTexts[result.strength];
}

// 检查密码要求
function checkPasswordRequirements(password, currentPassword) {
    const requirements = {
        length: password.length >= 8,
        lowercase: /[a-z]/.test(password),
        uppercase: /[A-Z]/.test(password),
        number: /[0-9]/.test(password),
        different: password !== currentPassword
    };

    Object.keys(requirements).forEach(req => {
        const element = document.getElementById(`req-${req}`);
        const icon = element.querySelector('i');

        if (requirements[req]) {
            element.classList.add('met');
            icon.className = 'bi bi-check';
        } else {
            element.classList.remove('met');
            icon.className = 'bi bi-x';
        }
    });

    return Object.values(requirements).every(req => req);
}

// 检查密码匹配
function checkPasswordMatch(newPassword, confirmPassword) {
    const indicator = document.getElementById('matchIndicator');

    if (confirmPassword.length === 0) {
        indicator.style.display = 'none';
        return false;
    }

    indicator.style.display = 'flex';

    if (newPassword === confirmPassword) {
        indicator.className = 'password-match-indicator password-match';
        indicator.innerHTML = '<i class="bi bi-check"></i>';
        return true;
    } else {
        indicator.className = 'password-match-indicator password-mismatch';
        indicator.innerHTML = '<i class="bi bi-x"></i>';
        return false;
    }
}

// 更新提交按钮状态
function updateSubmitButton() {
    const currentPassword = document.getElementById('currentPassword').value;
    const newPassword = document.getElementById('newPassword').value;
    const confirmPassword = document.getElementById('confirmPassword').value;
    const submitBtn = document.getElementById('submitBtn');

    const hasCurrentPassword = currentPassword.length > 0;
    const requirementsMet = checkPasswordRequirements(newPassword, currentPassword);
    const passwordsMatch = checkPasswordMatch(newPassword, confirmPassword);

    const canSubmit = hasCurrentPassword && requirementsMet && passwordsMatch;

    submitBtn.disabled = !canSubmit;

    if (canSubmit) {
        submitBtn.innerHTML = '<i class="bi bi-key me-2"></i>更新密码';
        submitBtn.style.opacity = '1';
    } else {
        submitBtn.innerHTML = '<i class="bi bi-lock me-2"></i>请完善密码信息';
        submitBtn.style.opacity = '0.6';
    }
}

// 绑定事件
document.addEventListener('DOMContentLoaded', function() {
    const currentPasswordInput = document.getElementById('currentPassword');
    const newPasswordInput = document.getElementById('newPassword');
    const confirmPasswordInput = document.getElementById('confirmPassword');

    newPasswordInput.addEventListener('input', function() {
        updatePasswordStrength(this.value);
        updateSubmitButton();
    });

    [currentPasswordInput, newPasswordInput, confirmPasswordInput].forEach(input => {
        input.addEventListener('input', updateSubmitButton);
    });

    // 初始状态检查
    updateSubmitButton();
});

// 表单提交处理
document.getElementById('passwordForm').addEventListener('submit', function(e) {
    const submitBtn = document.getElementById('submitBtn');

    if (submitBtn.disabled) {
        e.preventDefault();
        return;
    }

    // 显示提交状态
    submitBtn.innerHTML = '<i class="bi bi-hourglass-split me-2"></i>正在更新...';
    submitBtn.disabled = true;

    // 防止重复提交
    setTimeout(() => {
        if (submitBtn.disabled) {
            submitBtn.innerHTML = '<i class="bi bi-key me-2"></i>更新密码';
            submitBtn.disabled = false;
            updateSubmitButton();
        }
    }, 5000);
});

// 输入框焦点效果
document.querySelectorAll('.form-control').forEach(input => {
    input.addEventListener('focus', function() {
        this.parentElement.style.transform = 'scale(1.02)';
        this.parentElement.style.transition = 'transform 0.2s ease';
    });

    input.addEventListener('blur', function() {
        this.parentElement.style.transform = 'scale(1)';
    });
});
</script>
{% endblock %}